<template>
  <HeaderNavTabarVue   :title="statusFlag + '照片上传'" />
  <view class="installUpload" :style="'min-height: ' + boxHeight + 'rpx;'">
    <template v-if="statusFlag === '施工中'">
      <view class="uploadImage" >
        <view class="materialImage-title">
          <h4>上传现场照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('现场照片', $event)"
            @onDelete="onDelete('现场照片', $event)"
            :imageList="uploadPhotosFile.scenePhotos"
            :dataAPi="uploadPhotos.scenePhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.scenePhotos.length >0">
        <view class="materialImage-title">
          <h4>上传拆除照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('拆除照片', $event)"
            @onDelete="onDelete('拆除照片', $event)"
            :imageList="uploadPhotosFile.dismantledPhotos"
            :dataAPi="uploadPhotos.dismantledPhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.dismantledPhotos.length >0">
        <view class="materialImage-title">
          <h4>上传骨架照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('骨架照片', $event)"
            @onDelete="onDelete('骨架照片', $event)"
            :imageList="uploadPhotosFile.skeletonPhotos"
            :dataAPi="uploadPhotos.skeletonPhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.skeletonPhotos.length >0">
        <view class="materialImage-title">
          <h4>上传安装完毕照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('安装完毕照片', $event)"
            @onDelete="onDelete('安装完毕照片', $event)"
            :imageList="uploadPhotosFile.installedPhotos"
            :dataAPi="uploadPhotos.installedPhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.installedPhotos.length >0">
        <view class="materialImage-title">
          <h4>上传亮灯照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('亮灯照片', $event)"
            @onDelete="onDelete('亮灯照片', $event)"
            :imageList="uploadPhotosFile.illuminatedPhotos"
            :dataAPi="uploadPhotos.illuminatedPhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.illuminatedPhotos.length >0">
        <view class="materialImage-title">
          <h4>上传防水照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('防水照片', $event)"
            @onDelete="onDelete('防水照片', $event)"
            :imageList="uploadPhotosFile.waterproofPhotos"
            :dataAPi="uploadPhotos.waterproofPhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.waterproofPhotos.length >0">
        <view class="materialImage-title">
          <h4>上传服务卡照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('服务卡照片', $event)"
            @onDelete="onDelete('服务卡照片', $event)"
            :imageList="uploadPhotosFile.servceCardPhotos"
            :dataAPi="uploadPhotos.servceCardPhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.servceCardPhotos.length >0">
        <view class="materialImage-title">
          <h4>上传检修口照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('检修口照片', $event)"
            @onDelete="onDelete('检修口照片', $event)"
            :imageList="uploadPhotosFile.overhaulPhotos"
            :dataAPi="uploadPhotos.overhaulPhotos"
          />
        </view>
      </view>
      <view class="uploadImage" v-show="uploadPhotos.overhaulPhotos.length >0" style="margin-bottom: 120rpx">
        <view class="materialImage-title">
          <h4>上传施工交付单照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('施工交付单照片', $event)"
            @onDelete="onDelete('施工交付单照片', $event)"
            :imageList="uploadPhotosFile.deliveryOrderPhotos"
            :dataAPi="uploadPhotos.deliveryOrderPhotos"
          />
        </view>
      </view>
    </template>
    <view v-if="statusFlag === '上传工费'">
      <view class="uploadImage">
        <view class="materialImage-title">
          <h4>上传工费单照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('工费单', $event)"
            @onDelete="onDelete('工费单', $event)"
            :imageList="payBills"
            :dataAPi="payBillsObj"

          />
        </view>
      </view>
    </view>
    <view v-if="statusFlag === '待验收'">
      <view class="uploadImage">
        <view class="materialImage-title">
          <h4>上传验收自拍照片</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('验收自拍照', $event)"
            @onDelete="onDelete('验收自拍照', $event)"
            :imageList="acceptancePhotosObj"
            :dataAPi="acceptancePhotos"

          />
        </view>
      </view>
      <view class="uploadImage">
        <view class="materialImage-title">
          <h4>上传验收单</h4>
          <text>最多上传6张</text>
        </view>
        <view class="materialImage-upload">
          <UploadFile
            @getSuccessUrl="getSuccessUrl('验收单', $event)"
            @onDelete="onDelete('验收单', $event)"
            :imageList="acceptanceFormPhotosObj"
            :dataAPi="acceptanceFormPhotos"

          />
        </view>
      </view>
    </view>

    <view class="sub-box" @tap="subPhotos(statusFlag)"> 提交</view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import { getTitleBarHeight } from '@/utils/system.js'
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import {
  getProcessVOByIdApi,
  updateAcceptanceApi,
  updatePayBillsApi,
  updateProcessApi,
} from '@/api/customer'
import config from '@/config'

const boxHeight = (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2
const payBills = ref([]) // 工费
const payBillsObj = ref({}) // 工费
const acceptancePhotos = ref([]) // 验收自拍照
const acceptancePhotosObj = ref({}) // 验收自拍照
const acceptanceFormPhotos = ref([]) // 验收单
const acceptanceFormPhotosObj = ref([]) // 验收单
const uploadPhotos = ref({
  scenePhotos: [],
  dismantledPhotos: [],
  skeletonPhotos: [],
  installedPhotos: [],
  illuminatedPhotos: [],
  waterproofPhotos: [],
  servceCardPhotos: [],
  overhaulPhotos: [],
  deliveryOrderPhotos: [],
})
let uploadPhotosFile = ref({
  scenePhotos: [],
  dismantledPhotos: [],
  skeletonPhotos: [],
  installedPhotos: [],
  illuminatedPhotos: [],
  waterproofPhotos: [],
  servceCardPhotos: [],
  overhaulPhotos: [],
  deliveryOrderPhotos: [],
})
// 获取上传的图片
const getSuccessUrl = (type, fileName) => {
  console.log(uploadPhotos.value, '------------------------')
  switch (type) {
    case '现场照片':
      uploadPhotos.value.scenePhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.scenePhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '拆除照片':
      uploadPhotos.value.dismantledPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.dismantledPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '骨架照片':
      uploadPhotos.value.skeletonPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.skeletonPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '安装完毕照片':
      uploadPhotos.value.installedPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.installedPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '亮灯照片':
      uploadPhotos.value.illuminatedPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.illuminatedPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '防水照片':
      uploadPhotos.value.waterproofPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.waterproofPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '服务卡照片':
      uploadPhotos.value.servceCardPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.servceCardPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '检修口照片':
      uploadPhotos.value.overhaulPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.overhaulPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '施工交付单照片':
      uploadPhotos.value.deliveryOrderPhotos.push(config.baseUrl + fileName)
      uploadPhotosFile.value.deliveryOrderPhotos.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break

    case '工费单':
      payBills.value.push(config.baseUrl + fileName)
      payBillsObj.value.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '验收自拍照':
      acceptancePhotos.value.push(config.baseUrl + fileName)
      acceptancePhotosObj.value.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
    case '验收单':
      acceptanceFormPhotos.value.push(config.baseUrl + fileName)
      acceptanceFormPhotosObj.value.push({
        url: config.baseUrl + fileName,
        extname: 'png',
        name: config.baseUrl + fileName,
      })
      break
  }
}
// 删除图片后的数据
const onDelete = (type, fileName) => {
  switch (type) {
    case '现场照片':
      uploadPhotos.value.scenePhotos = fileName
      break
    case '拆除照片':
      uploadPhotos.value.dismantledPhotos = fileName
      break
    case '骨架照片':
      uploadPhotos.value.skeletonPhotos = fileName
      break
    case '安装完毕照片':
      uploadPhotos.value.installedPhotos = fileName
      break
    case '亮灯照片':
      uploadPhotos.value.illuminatedPhotos = fileName
      break
    case '防水照片':
      uploadPhotos.value.waterproofPhotos = fileName
      break
    case '服务卡照片':
      uploadPhotos.value.servceCardPhotos = fileName
      break
    case '检修口照片':
      uploadPhotos.value.overhaulPhotos = fileName
      break
    case '施工交付单照片':
      uploadPhotos.value.deliveryOrderPhotos = fileName
      break
    case '工费单':
      payBills.value = fileName
      break
    case '验收自拍照':
      acceptancePhotos.value = fileName
      break
    case '验收单':
      acceptanceFormPhotos.value = fileName
      break
  }
}
const statusFlag = ref('施工中')
const installationProcessId = ref(null)
const orderId = ref(null)

const getProcessVOByIdApiFn = async (id) => {
  let params = {
    id: String(id),
  }
  let { code, data } = await getProcessVOByIdApi(params)
  let datas = data.process
  if (code === 200) {
    if (statusFlag.value === '施工中') {
      for (let key in uploadPhotos.value) {
        let obj = JSON.parse(datas[key])
        if (obj.length === 0) {
          uploadPhotosFile.value[key] = []
          uploadPhotos.value[key] = []
        } else {
          uploadPhotosFile.value[key] = obj
            ? {
                url: obj,
                extname: 'png',
                name: obj,
              }
            : []
          uploadPhotos.value[key] = typeof obj === 'string' ? JSON.parse(obj) : obj
        }
      }
    } else if (statusFlag.value === '待验收') {
      if (JSON.parse(datas.acceptancePhotos).length > 0) {
        acceptancePhotosObj.value = {
          url: JSON.parse(datas.acceptancePhotos),
          extname: 'png',
          name: JSON.parse(datas.acceptancePhotos),
        }
        acceptancePhotos.value = JSON.parse(datas.acceptancePhotos)
      }
      if (JSON.parse(datas.acceptanceFormPhotos).length > 0) {
        acceptanceFormPhotosObj.value = {
          url: JSON.parse(datas.acceptanceFormPhotos),
          extname: 'png',
          name: JSON.parse(datas.acceptanceFormPhotos),
        }

        acceptanceFormPhotos.value = JSON.parse(datas.acceptanceFormPhotos)
      }
    }

    installationProcessId.value = datas.installationProcessId
    orderId.value = datas.orderId
  }
}

const flagDataAll = (data) => {
  let copyData = JSON.parse(JSON.stringify(data))
  for (let key in copyData) {
    copyData[key] = JSON.parse(data[key]).length === 0 ? false : true
  }
  return Object.values(copyData).every((value) => value === true)
}

const subPhotos = async (statusFlag) => {
  if (statusFlag === '施工中') {
    for (const paramsKey in uploadPhotos.value) {
      if (uploadPhotos.value[paramsKey].length === 0) {
        uploadPhotos.value[paramsKey] = JSON.stringify([])
      } else {
        uploadPhotos.value[paramsKey] = JSON.stringify(uploadPhotos.value[paramsKey])
      }
    }
    let params = {
      ...uploadPhotos.value,
      installationProcessId: installationProcessId.value,
      orderId: orderId.value,
      status: flagDataAll(uploadPhotos.value) ? '上传工费' : null,
    }

    let { code } = await updateProcessApi(params)
    if (code === 200) {
      uni.showToast({
        title: '提交成功',
      })
      for (const paramsKey in uploadPhotos.value) {
        if (uploadPhotos.value[paramsKey] === '[]') {
          uploadPhotos.value[paramsKey] = []
        }
      }
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    }
  } else if (statusFlag === '上传工费') {
    let params = {
      installationProcessId: installationProcessId.value,
      orderId: orderId.value,
      payBills: JSON.stringify(payBills.value),
    }
    let { code } = await updatePayBillsApi(params)
    if (code === 200) {
      uni.showToast({
        title: '提交成功',
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    }
  } else if (statusFlag === '待验收') {
    let params = {
      installationProcessId: installationProcessId.value,
      orderId: orderId.value,
      acceptancePhotos: JSON.stringify(acceptancePhotos.value),
      acceptanceFormPhotos: JSON.stringify(acceptanceFormPhotos.value),
    }
    let { code } = await updateAcceptanceApi(params)
    if (code === 200) {
      uni.showToast({
        title: '提交成功',
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    }
  }
}
onLoad((v) => {
  statusFlag.value = v.status
  getProcessVOByIdApiFn(v.id)
})
</script>

<style lang="scss" scoped>
@import '/static/style/index.scss';

.installUpload {
  padding: $spacing-row-base;
  box-sizing: border-box;
  // @include main-area-bgColor;
  overflow-y: auto;
  background-color: $uni-bai;

  .uploadImage {
    // @include background-color;
    background-color: $uni-bg-lin;
    padding: $spacing-row-base $spacing-col-base;
    border-radius: 16rpx;
    margin-bottom: 40rpx;

    .materialImage-title {
      @include flex(center, space-between);
      margin-bottom: $spacing-row-base;

      h4 {
        font-weight: 550;
        // @include font-color;
        color: $uni-fc-lin;
      }

      text {
        // @include font-color-auxiliary;
        color: $uni-fc-fu-lin;
      }
    }
  }

  .sub-box {
    position: fixed;
    bottom: 0%;
		z-index: 999;
    background-color: #165dff;
    color: #fff;
    @include flex($align: center, $justify: center);
    width: 686rpx;
    height: 104rpx;
    border-radius: 16rpx;
  }
}
</style>
